<template>
  <div class="recharge">
    <Card>
    <p size="large" slot="title">
      线下充值
    </p>
    <div class="record">
      <Row type="flex" justify="start" class="code-row-bg">
        <record-list v-for="(item,index) in recordData" :key="index" :item="item">
        </record-list>
      </Row>
    </div>
    <i-form ref="form-validate" :model="formValidate" :rules="ruleValidate" :label-width="120">
      <!-- <Form-item label="充值银行" prop="bank">
        <i-select  v-model="formValidate.bank"
         placeholder="请选择银行">
          <i-option  v-for="(item,index) in bank" :key="index" @click.native="toBank(index)" value="">{{item.title}}</i-option>
        </i-select>
      </Form-item> -->
      <Form-item  label="充值金额(元)" prop="price">
        <i-input width="200" v-model="formValidate.price" number @on-blur='shouPoundage'></i-input>
      </Form-item>
      <Form-item  label="手续费(元)" prop="poundage">
        <i-input width="200" v-model="formValidate.poundage" number disabled></i-input>
      </Form-item>
      <Form-item prop="pay_pwd" label="支付密码" v-show="payMode === 0 || payMode === 2" style="margin-top: 25px;">
        <i-input style="width: 20%;" type="password" v-model="formValidate.pay_pwd" placeholder="请输入密码"></i-input>
      </Form-item>

      <Form-item prop="vcode" label="谷歌验证码" v-show="payMode === 1 || payMode === 2" style="margin-top: 25px;">
        <i-input style="width: 20%;" v-model="formValidate.vcode" placeholder="谷歌验证码"></i-input>
      </Form-item>
      <Form-item>
        <i-button type="error" :loading="loading" @click="handleSubmit()">提交充值</i-button>
        <!-- <i-button @click="handleReset()" style="margin-left: 8px">重置</i-button> -->
      </Form-item>
    </i-form>
  </Card>
  </div>

</template>

<script>
import { merRecharge, getUserInfo } from '@/api/user'
import RecordList from '@/components/record-list/record-list.vue'
const nonull = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('必须项不能为空'))
  }
  // 模拟异步验证效果
  setTimeout(() => {
    callback()
  })
}
const validateMoney = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('金额不能为空'))
  }
  // 模拟异步验证效果
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('只能填写数字哦'))
    } else {
      callback()
    }
  }, 1000)
}
export default {
  // name: 'offline-recharge',
  components: {
    RecordList
  },
  data () {
    return {
      selected: '',
      payMode: this.$store.state.user.userInfo.pay_safemode,
      formValidate: {
        price: '',
        poundage: '',
        pay_pwd: '',
        vcode: ''
      },
      ruleValidate: {
        price: [{
          validator: validateMoney,
          trigger: 'change'
        }]
      },
      recordData: [{
        title: '当前剩余可申请代付金额：',
        num: 0,
        color: '#FD2424',
        unit: '元'
      }],
      loading: false
    }
  },
  mounted () {
    this.payModeinit()
    this.getUserData()
  },
  methods: {
    payModeinit () {
      if (this.payMode === 0) {
        this.ruleValidate.pay_pwd = {
          required: true,
          message: '请填写支付密码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 1) {
        this.ruleValidate.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 2) {
        this.ruleValidate.pay_pwd = {
          required: true,
          message: '请填写支付密码',
          trigger: 'blur'
        }
        this.ruleValidate.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        }
      }
    },
    getUserData () {
      getUserInfo(this.$store.state.user.userInfo.uid)
        .then(res => {
          const data = res.data
          this.recordData[0].num = data.paid_money

          this.$store.commit('UPDATE_USERINFO', data)
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    shouPoundage () {
      this.formValidate.poundage = parseFloat(this.formValidate.price) * parseFloat(parseFloat(this.$store.state.user.userInfo.recharge_rate) / 100)
    },
    // 充值
    handleSubmit () {
      this.formValidate.uid = this.$store.state.user.userInfo.uid
      this.$refs['form-validate'].validate((valid) => {
        if (valid) {
          this.loading = !this.loading
          merRecharge(this.formValidate)
            .then(res => {
              this.$Message.success(res.msg)
              this.loading = !this.loading
            }).catch(err => {
              this.$Message.error(err.msg)
              this.loading = !this.loading
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>

<style>
  .ivu-card-head {
    position: relative;
  }
  .ivu-card-head::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 70px;
    border-bottom: 2px solid #5FB878;
  }
  .recharge .ivu-form .ivu-form-item-label {
    font-size: 14px;
  }

</style>
